<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="robots" content="noindex">
<title>blok: Collaborative Editing of Diagrams and UI Prototypes</title>
<script type="text/javascript">

document.paras = {
	docId:      "{{ docId|escape }}",
	userName:   "{{ userName|escape }}",
	guidBase:   "{{ guidBase|escape }}",
	sessionId:  "{{ sessionId|escape }}",
	timeOffset: ({{ nowMilliseconds|escape }} - new Date().getTime())
}

</script>

<!--  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script> -->
<script type="text/javascript" src="static/jquery-1.2.6.min.js"></script>

<script type="text/javascript">
(function () {
	var version = new Number(jQuery.browser.version)
	if(document.all && jQuery.browser.msie && version < 7) {
		location.href = "/static/old_browser.html"
	}
})()
</script>

<script type="text/javascript" src="static/jquery.ui.all.min.js"></script>
<script type="text/javascript" src="static/jquery-cmenu.js"></script>
<script type="text/javascript" src="static/ColorPicker.js"></script>
<script type="text/javascript" src="static/jquery.hotkeys.js"></script>
<script type="text/javascript" src="static/joose.mini.js"></script>
<script type="text/javascript" src="static/json2.js"></script>


<script type="text/javascript" src="block/built_in_class_extension.js"></script>
<script type="text/javascript" src="block/ui/Array.js"></script>
<script type="text/javascript" src="block/ui/ElementMetaclass.js"></script>
<script type="text/javascript" src="block/ui/role/Notification.js"></script>
<script type="text/javascript" src="block/ui/role/Draggable.js"></script>
<script type="text/javascript" src="block/ui/role/Resizable.js"></script>
<script type="text/javascript" src="block/ui/role/Focusable.js"></script>
<script type="text/javascript" src="block/ui/role/Editable.js"></script>
<script type="text/javascript" src="block/ui/role/ShapeUI.js"></script>
<script type="text/javascript" src="block/ui/role/Group.js"></script>
<script type="text/javascript" src="block/ui/role/Stylable.js"></script>
<script type="text/javascript" src="block/ui/role/Connectable.js"></script>
<script type="text/javascript" src="block/ui/Guid.js"></script>
<script type="text/javascript" src="block/ui/Manager.js"></script>
<script type="text/javascript" src="block/ui/Query.js"></script>
<script type="text/javascript" src="block/ui/Document.js"></script>
<script type="text/javascript" src="block/ui/DocumentHeader.js"></script>
<script type="text/javascript" src="block/ui/Element.js"></script>
<script type="text/javascript" src="block/ui/Container.js"></script>
<script type="text/javascript" src="block/ui/Undo.js"></script>

<script type="text/javascript" src="block/ui/Shape.js"></script>
<script type="text/javascript" src="block/ui/shape/Grid.js"></script>
<script type="text/javascript" src="block/ui/shape/PropertiesPanel.js"></script>
<script type="text/javascript" src="block/ui/shape/DragPoint.js"></script>
<script type="text/javascript" src="block/ui/shape/Rectangle.js"></script>
<script type="text/javascript" src="block/ui/shape/Image.js"></script>
<script type="text/javascript" src="block/ui/shape/SelectionGroup.js"></script>
<script type="text/javascript" src="block/ui/shape/Group.js"></script>
<script type="text/javascript" src="block/ui/shape/MultiSelection.js"></script>
<script type="text/javascript" src="block/ui/CustomShapeBody.js"></script>
<script type="text/javascript" src="block/ui/shape/Custom.js"></script>
<script type="text/javascript" src="block/ui/shape/Connection.js"></script>
<script type="text/javascript" src="block/ui/Template.js"></script>
<script type="text/javascript" src="block/ui/User.js"></script>

<script type="text/javascript" src="block/ui/Sync.js"></script>

{% if isGadget %}
{% for lib in gadgetLibs %}
<script type="text/javascript" src="http://www.google.com/ig/f/{{ lib }}"></script>
{% endfor %}
{% endif %}

<link href="static/block.css" rel="stylesheet" type="text/css" />
{% if isBlank %}
<link href="static/blank.css" rel="stylesheet" type="text/css" />
{% endif %}
<link href="static/ColorPicker.css" rel="stylesheet" type="text/css" />
<link href="static/themes/flora/flora.all.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="block/base.js"></script>
<script type="text/javascript">

function onfirstdraw() {
	{% if isGadget %}
		 _IG_AdjustIFrameHeight();
	{% endif %}


	$("#blocker").hide();
	
	doInitialAction()
}


</script>

</head>

<body>


<div id="canvas">

<div id="welcomeDialog" class="flora" title="Welcome to blok">
  <h1>Welcome to blok</h1>
  <p>
    blok is a web based application for real time collaborative editing of simple diagrams and 
    user interface prototypes.
  </p>
  <p>
    Simply share the URL of this document with a friend or co-worker and all changes will be 
    synchronized between your computers immediately.
  </p>
  <p>
    Try out the regular keyboard short cuts for copy, paste, delete, undo and select all. 
    They should work just like you expect.
  </p>
  <p><strong>How would you like to start?</strong></p>
  <ul>
    <li><a href="javascript:closeWelcomeDialog()">Create a new diagram</a></li>
    <li><a href="javascript:loadTemplate('/templates/diagram/organigram.json'); closeWelcomeDialog()">Start with a diagram template</a></li>
    <li><a href="javascript:loadTemplate('/templates/ui/web-page.json'); closeWelcomeDialog()">Start with a web-page prototype template</a></li>
  </ul>
</div>
<div id="stateDialog" class="flora" title="Document State" style="font-size: 9px">
  <textarea style="width:100%;height:100%"></textarea>
</div>

<div id="loadDialog" class="flora" title="Your Documents">
  <div id="documentList"></div>
</div>

<div id="leftMenu">
<ul>
  <li>
    <h2>Shapes</h2>
    <ul>
      <li><a href="javascript:void(block.ui.shape.Rectangle.addToDoc())">Rectangle</a></li>
      <li><a href="javascript:void(block.ui.shape.Image.addToDoc())">Image</a></li>
      <li>---</li>
      <li><a href="javascript:void(block.ui.shape.Connector.connectFocused())">Connect Selected</a></li>
      <li style="display:none">
        <h2>Custom Shapes</h2>
        <ul id="customShapes"></ul>
      </li>
    </ul>
  </li>
  <li>
    <h2>Document</h2>
    <ul>
      <!-- <li><a href="javascript:document.sync.savePermanent()">Save</a></li> -->
      <li><a href="/?id={{ newId|escape }}" rel=nofollow>New Document</a></li>
      <li>---</li>
      <li><a href="javascript:saveDocument()">Save As</a></li>
      <li><a href="javascript:loadDocuments()">Open</a></li>
    </ul>
  </li>
  <li>
    <h2>Edit</h2>
    <ul>
      <li><a href="javascript:document.manager.copyFocused()">Copy</a></li>
      <li><a href="javascript:document.manager.paste()">Paste</a></li>
      <li><a href="javascript:document.undo.undo()">Undo</a></li>
    </ul>
  </li>
  
  <li>
    <h2>About</h2>
    <ul>
      <li><a href="http://joose-js.blogspot.com" target="_blank">blok blog</a></li>
      <li><a href="http://code.google.com/p/joose-js/" target="_blank">Joose JS</a></li>
      <li><a href="http://code.google.com/p/joose-js/issues/entry" target="_blank">Report a Bug</a></li>
    </ul>
  </li>
  
  {% if isTest %}
  <li>
    <h2>Debugging</h2>
    <ul class="hidden">
      <!-- <li><a href="javascript:void($('#browser').show())">Class Browser</a></li> -->
      <li><a href="javascript:showState()">Show State</a></li>
      <li><a href="javascript:showClipboardContent()">Show Clipboard</a></li>
      <li>Sync<input type="checkbox" id="doSync" checked=true></li>
    </ul>
  </li>
  {% endif %}
</ul>
<div id="saveMessage"></div>
</div>



<div id="drawArea">
  <div id="grid"></div>
  <div id="shapeArea"></div>
</div>


<div id="properties">
<div id="shapeProperties">
  <h1>Properties of <span id="shapeType"></span>
  <table border=0 cellpadding=2>
    <tr>
      <th>X</th><td><input id="propx" style="width:50px" class="number"></td>
      <th>Width</th><td><input id="propwidth" jooseDoes="block.ui.role.Resizable" style="width:50px" class="number"></td>
      <th>Font Color</th><td><input id="propcss-color" class="text colorPicker"   style="width:70px"></td>
      <th>Font Family</th>
        <td>
          <select id="propcss-fontFamily">
            <option value="">Default</option>
            <option value="Arial">Arial</option>
            <option value="Courier">Courier</option>
            <option value="Times">Times</option>
            <option value="Verdana">Verdana</option>
          </select>
      <th>Text</th><td><input id="proptext" class="text" style="width:90px"></td>
      <th>Border Width</th><td><input id="propcss-borderWidth" addPx=true class="text" style="width:40px"> px</td>
      
    </tr>
    <tr>
      <th>Y</th><td><input id="propy" style="width:50px" class="number"></td>
      <th>Height</th><td><input id="propheight" jooseDoes="block.ui.role.Resizable"             style="width:50px" class="number"></td>
      <th>Background Color</th><td><input id="propcss-backgroundColor" class="text colorPicker" style="width:70px"></td>
      <th>Font Size</th><td><input id="propcss-fontSize" addPx=true class="text" style="width:40px"> px</td>
      <th></th><td></td>
      <th>Border Color</th><td><input id="propcss-borderColor" class="text colorPicker"   style="width:70px"></td>
    </tr>
  </table>
</div> 
<div id="documentProperties">
  <h1>You are editing &quot;<span id="documentTitle"></span>&quot;</h1>
  <label for="share">Share this document for real time collaborative editing: </label><input value="http://blok.appspot.com/?id={{ docId|escape }}" size=60 id="share" style="text-align: right">
</div>
</div>





<div class="contextMenu" id="ShapeContextMenu">
  <ul>
    <li id="ctDelete">Delete</li>
    <li id="ctCopy">Copy</li>
    <li id="ctBringToFront">Bring to Front</li>
    <li id="ctAsGroup">Group</li>
    <li id="ctUnGroup">Un-Group</li>
  </ul>
</div>

</div>

<div id="blocker">Loading blok...</div>

<script type="text/javascript">

var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));

</script>
<script type="text/javascript">
if(window._gat) {
	var pageTracker = _gat._getTracker("UA-340701-27");
	pageTracker._initData();
	pageTracker._trackPageview("/example/blok");
}
</script>

</body>
</html>